/**
 * Created by xxx on 2017/6/13.
 */
var provinceData = [{value:'选择省'}], cityData = [{value:'选择市'}], townDate = [{value:'选择区'}] ,schoolDataList = [];
var Main = React.createClass({
    //组件初始状态
    getInitialState: function () {
        return {
            type: true,//true:查询地址，false：查询学校
            provinceDate: provinceData,
            schoolDataAll:[],
            schoolDataList:schoolDataList,
            cityDate: cityData,
            townDate: townDate
        }
    },
    componentDidMount: function () {
        this.queryAddress(1,'','');
        var svar = this;
        suixun.ajax(serverUrl+'/schoolManage/querySchool.json','',"get",function(data){
            var schoolDataAll = [];
            if(data.code == 200 ){
                for(var i=0;i<data.info.length;i++){
                    var obj=data.info[i];
                    schoolDataAll[i] = {key:i,id:obj.id,schoolname:obj.schoolname};
                }
                schoolDataList = schoolDataAll;
                svar.setState({schoolDataList:schoolDataAll,schoolDataAll:schoolDataAll});
            }else{
                svar.setState({schoolDataList:schoolDataAll,schoolDataAll:schoolDataAll});
            }
        });
    },
    /**
     * 查询地址
     * @param type
     * @param province
     * @param city
     */
    queryAddress:function (type,province,city) {
        var param="param={";
        param = getJsonDataNotEmpty(param,"type",'"'+type+'"');
        param = getJsonDataNotEmpty(param,"province",'"'+province+'"');
        param = getJsonDataNotEmpty(param,"city",'"'+city+'"');
        param += "}";
        var svar = this;
        suixun.showLoding();
        suixun.ajax(serverUrl+'/schoolManage/queryRegion.json',param,"get",function(data){
            suixun.hideLoding();
            if(data.code == 200){
                if(type == "1"){
                    provinceData = [{value:'选择省'}];
                    for(var i = 0 ;i < data.info.length;i++ ){
                        provinceData.push({value:data.info[i].province});
                    }
                    svar.setState({provinceDate:provinceData});
                }else if(type == "2"){
                    cityData = [{value:'选择市'}];
                    for(var i = 0 ;i < data.info.length;i++ ){
                        cityData.push({value:data.info[i].city});
                    }
                    svar.setState({cityDate:cityData,townDate:[{value:'选择区'}]});
                }else{
                    townDate = [{value:'选择区'}];
                    for(var i = 0 ;i < data.info.length;i++ ){
                        townDate.push({value:data.info[i].town});
                    }
                    svar.setState({townDate:townDate});
                }
            }
        });
    },
    /**
     * 切换查询条件地址、学校
     * @param type
     */
    upType: function (type) {
      this.setState({type:type});
    },
    /**
     * 点击查询
     */
    onClickQuery: function () {
        if(this.state.type){
            var province = $("#province").val(),city = $("#city").val(),town = $("#town").val(),address = '';
            if(province == "选择省"){
                suixun.tips('请选择省！');
                return;
            }else{
                address = province;
            }
            if(city == '选择市'){
                city = "";
            }else{
                address = province+"-"+city;
            }
            if(town == '选择区'){
                town = "";
            }else{
                address = province+"-"+city+"-"+town;
            }
            localStorage.statListQueryValue = address;
            window.location.href = './mobile-statListAddress.html';//去统计查询
        }else{
            var schoolName = $("#schoolName").val(),b = true;
            if(schoolName == ""){
                suixun.tips('请输入学校名称！');
                return;
            }

            for(var i = 0;i < this.state.schoolDataAll.length;i++){
                if(this.state.schoolDataAll[i].schoolname == schoolName){
                    b = false;
                }
            }
            if(b){
                suixun.tips('不存在该学校！');
                return;
            }
            localStorage.statListQueryValue = schoolName;
            window.location.href = './mobile-statListSchool.html';//去统计查询
        }

    },
    /**
     * 改变下拉框
     */
    onChangeSelect: function (type,e) {
        var selItem = $(e.target).val();
        if (selItem == $(e.target).find('option:first').val()) {
            $(e.target).css("color", '#ccc');
        } else {
            $(e.target).css("color", '#333');
        }
        if(type == 2){
            $('#city').css("color", '#ccc');
            $('#town').css("color", '#ccc');
            this.queryAddress(type,$("#province").val(),'');
            $("#city").val("选择市");
            $("#town").val("选择区");
        }else if(type == 3){
            $('#town').css("color", '#ccc');
            this.queryAddress(type,$("#province").val(),$("#city").val());
            $("#town").val("选择区");
        }
    },
    /**
     * 改变弹出层学校输入框
     * @param e
     */
    onChangSchoolInput: function (e) {
        var val = $(e.target).val();
        if(val != ""){
            this.schoolArray(val,$(e.target).attr("data-list"));
        }else{
            $("."+$(e.target).attr("data-list")+"").hide();
        }
    },
    /**
     * 排序
     * @param val
     * @param cls
     */
    schoolArray: function (val,cls) {
        schoolDataList = [];
        for(var i = 0;i < this.state.schoolDataAll.length;i++){
            if((this.state.schoolDataAll[i].schoolname).indexOf(val) >= 0){
                schoolDataList.push({schoolname:this.state.schoolDataAll[i].schoolname});
            }
        }
        if(schoolDataList.length == 0){
            $("."+cls+"").hide();
        }else{
            $("."+cls+"").show();
            this.setState({schoolDataList:schoolDataList});
        }
    },
    /**
     * 点击学校输入框
     * @param e
     */
    onClickSchool: function (e) {
        var val = $(e.target).val();
        this.schoolArray(val,$(e.target).attr("data-list"));
    },
    render: function () {
        {
            var svar = this;
        }
        return (
            <div className="statList">
                <header >
                    <div className="title">统计查询</div>
                </header>
                <div className="body">
                    <div className="queryMenu">
                        <div className="queryMenuLeft" onClick={this.upType.bind(this,true)}><span className={this.state.type==true?'online':''}>省市区</span></div>
                        <div className="queryMenuRight" onClick={this.upType.bind(this,false)}><span className={this.state.type==true?'':'online'}>学校</span></div>
                    </div>
                    {
                        this.state.type==true?
                            <div className="addressQuery">
                                <div className="img"><img src="../img/icon/mobile/address.png" /></div>
                                <div className="content">
                                    <ul>
                                        <li>
                                            <select  name="" id="province" onChange={this.onChangeSelect.bind(this,2)} >
                                                {
                                                    provinceData.map(function (data) {
                                                        return (
                                                            <option value={data.value}>{data.value}</option>
                                                        )
                                                    }.bind(this))
                                                }
                                            </select>
                                        </li>
                                        <li className="noOne">
                                            <select name="" id="city" onChange={this.onChangeSelect.bind(this,3)} >
                                                {
                                                    cityData.map(function (data) {
                                                        return (
                                                            <option value={data.value}>{data.value}</option>
                                                        )
                                                    }.bind(this))
                                                }
                                            </select>
                                        </li>
                                        <li className="noOne">
                                            <select name="" id="town" onChange={this.onChangeSelect.bind(this,0)} >
                                                {
                                                    townDate.map(function (data) {
                                                        return (
                                                            <option value={data.value}>{data.value}</option>
                                                        )
                                                    }.bind(this))
                                                }
                                            </select>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            :
                            <div className="schoolQuery">
                                <div className="img"><img src="../img/icon/mobile/school.png" /></div>
                                <div className="content">
                                    <input type="text"  onChange={this.onChangSchoolInput} onClick={this.onClickSchool}  data-list="querySchoolTable"  id="schoolName" placeholder='按关键字搜索学校' maxLength="50" />
                                </div>
                                <div className="schoolList querySchoolTable" data-inputId="schoolName">
                                    {
                                        schoolDataList.map(function (data) {
                                            return (
                                                <span className="schoolList-value" onClick={svar.onClickQuerySchoolList}>{data.schoolname}</span>
                                            )
                                        })
                                    }
                                </div>
                            </div>
                    }
                    <div className="button" >
                        <span className="query" onClick={this.onClickQuery}>查&nbsp;&nbsp;询</span>
                    </div>
                </div>
            </div>
        );
    }
});
ReactDOM.render(
    <Main  />,
    document.getElementById('app')
);
//学校下拉列表
$("*").bind("click",function(e){
    var target = $(e.target);
    if(target.closest(".schoolList-value").length == 1){
        $("#"+$(target.parent()).attr("data-inputId")+"").val(target.html());
        $(".schoolList").hide();
    }else{
        $(".schoolList").hide();
    }
});